import { ExclamationCircleFilled } from '@ant-design/icons';
import { Button, Modal, Space } from 'antd';
import React from 'react';
import styles from './index.less';

export type InformationModalProps = {
  visible: boolean;
  modalText: string;
  confirmLoading: boolean;
  showModalBtn: boolean;
  handleOk: () => void;
  onCancel: () => void;
  onChange?: (value?: string) => void;
};

/**
 * 红色感叹号消息弹框
 * @param props
 * @returns
 */

const InformationModal: React.FC<InformationModalProps> = (props) => {
  return (
    <Modal
      visible={props.visible}
      centered
      width={500}
      footer={false}
      bodyStyle={{ textAlign: 'center', padding: '54px', paddingTop: '40px' }}
      onCancel={() => props.onCancel()}
    >
      <ExclamationCircleFilled className={styles.exclamation} />
      {props.showModalBtn ? (
        <>
          <p className={styles.recruitingText}>{props.modalText}</p>
          <div style={{ textAlign: 'center' }}>
            <Space>
              <Button
                type="primary"
                htmlType="submit"
                size="middle"
                onClick={() => {
                  props.handleOk();
                }}
                loading={props.confirmLoading}
              >
                确定
              </Button>
              <Button htmlType="button" onClick={() => props.onCancel()} size="middle">
                取消
              </Button>
            </Space>
          </div>
        </>
      ) : (
        <p className={styles.recruitingText} style={{ textAlign: 'center' }}>
          {props.modalText}
        </p>
      )}
    </Modal>
  );
};
export default InformationModal;
